<script setup lang="ts" name="CkWrap">
import { templateRef, useResizeObserver, useDebounceFn } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import { useLayoutStore } from '@/store/modules/bigScreen/layoutStore'

const layoutStore = useLayoutStore()

const { layout, layoutBox } = storeToRefs(layoutStore)

const resizeCoreDom = templateRef<HTMLElement | null>('resizeCoreDom', null)
const monitCoreResize = () => {
  layoutBox.value.width = resizeCoreDom.value.offsetWidth
  layoutBox.value.height = resizeCoreDom.value.offsetHeight
  console.log(layoutBox.value.width, '宽度')
  console.log(layoutBox.value.height, '高度')
}
// 监听元素尺寸变化
useResizeObserver(
  resizeCoreDom,
  useDebounceFn(() => {
    monitCoreResize()
  }, 200)
)
</script>

<template>
  <div ref="resizeCoreDom" class="dnd-container wrap">
    <template v-if="layout.left.length > 0">
      <template v-for="item, index in layout.left" :key="index">
        <template v-if="item.component && item.visible">
          <component :is="item.component" :info="item" :index="index" />
        </template>
      </template>
    </template>
    <slot />
    <template v-if="layout.right.length > 0">
      <template v-for="item, index in layout.right" :key="index">
        <template v-if="item.component && item.visible">
          <component :is="item.component" :info="item" :index="index" />
        </template>
      </template>
    </template>
  </div>
</template>

<style scoped lang="scss">
.dnd-container {
  position: relative;
  display: flex;
  flex: 1;
}
</style>
